<template>
  <el-row class="input-name" :class="{ center: center }">
    <div class="modify" v-if="isModify">
      <el-input-number
        v-if="type === 'number'"
        ref="input"
        v-bind="$attrs"
        v-on="$listeners"
        v-model="value"
        :maxlength="maxLength"
        @blur="modify"
        @keyup.esc.stop.prevent="closeModify"
        @keyup.enter.stop.prevent="$refs.input.blur()">
      </el-input-number>
      <template v-else>
        <input
          type="text"
          ref="input"
          class="input"
          v-model="value"
          :maxlength="maxLength"
          @blur="modify"
          @keyup.esc.stop.prevent="closeModify"
          @keyup.enter.stop.prevent="$refs.input.blur()"/>
        <i
          v-if="value"
          class="el-icon-circle-close"
          @click.stop.prevent="clearValue">
        </i>
      </template>
    </div>
    <div class="show" v-else>
      <span :title="text" class="text">
        {{ text || text === 0 ? text : emptyText }}
      </span>
      <i
        v-if="!disabled"
        class="el-icon-edit"
        @click.stop.prevent="showModify">
      </i>
    </div>
  </el-row>
</template>

<script>

export default {
  name: 'InputName',
  data() {
    return {
      // 是否正在编辑状态
      isModify: false,
      // 编辑名称输入框中名称显示
      value: '',
      // 是否点击清空设备名称按钮（在失焦事件中用到）
      isClear: false,
      // 是否关闭修改设备名称状态（在失焦事件中用到）
      isClose: false
    };
  },
  props: {
    type: {
      type: String,
      default: 'number'
    },
    /**
     * 要修改的名称值
     */
    text: {
      type: [String, Number],
      default: ''
    },
    /**
     * text为空时的预显示文字
     */
    emptyText: {
      type: String,
      default: ''
    },
    /**
     * 是否可编辑
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 最大输入长度
     */
    maxLength: {
      type: Number,
      default: 20
    },
    /**
     * 值变化时候的回调
     */
    change: {
      type: Function,
      default: () => () => true
    },
    /**
     * 失焦时是否触发change
     */
    changeOnBlur: {
      type: Boolean,
      default: false
    },
    /**
     * 文案是否居中
     */
    center: {
      type: Boolean,
      default: true
    },
    /**
     * 是否允许为空
     */
    allowEmpty: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    isModify(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.input && this.$refs.input.focus();
        });
      }
    }
  },
  methods: {
    /**
     * 展示编辑名字input
     */
    showModify() {
      this.isModify = true;
      this.value = this.text;
    },
    /**
     * 隐藏编辑名字input
     */
    closeModify() {
      this.isClose = true;
      this.isModify = false;
      this.value = '';
    },
    /**
     * 清空编辑名字input
     */
    clearValue() {
      this.isClear = true;
      this.value = '';
      this.$refs.input && this.$refs.input.focus();
    },
    /**
     * 失焦时编辑名称
     */
    modify() {
      // 如果之前通过keyup退出编辑状态导致失焦，不操作
      if (this.isClose) {
        this.isClose = false;
        return;
      }
      this.isClear = false;
      // 必须延时，失焦事件会在click事件之前触发，大概会延迟100到150毫秒
      setTimeout(async () => {
        if (!this.isClear) {
          this.value = this.type === 'number'
            ? this.value
            : String(this.value).trim();
          if (!this.allowEmpty && !this.value) this.value = this.text;
          if (this.value !== this.text || this.changeOnBlur) {
            const result = await this.change(this.value);
            if (!result && this.$refs.input) {
              this.$refs.input.focus();
              return;
            }
          }
          this.value = '';
          this.isModify = false;
        }
      }, 200);
    }
  }
};
</script>

<style scoped lang="less">
  .input-name {
    height: 30px;
    .modify {
      display: flex;
      position: relative;
      height: 100%;
      .input {
        font-size: 100%;
        height: 100%;
        /*border-top: none;*/
        /*border-right: none;*/
        /*border-left: none;*/
        /*border-bottom: 1px solid #eee;*/
        outline: none;
        width: 100%;
          padding: 0 30px 0 0;
      }
      i {
        display: flex;
        align-items: center;
        padding-left: 4px;
        cursor: pointer;
        font-size: 16px;
      }
      /deep/.el-input-number {
        height: 100%;
        .el-input {
          height: 100%;
          display: flex;
          input {
            height: 100%;
          }
        }
      }
    }
    .show {
      font-size: 100%;
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      padding-bottom: 1px;
      .text {
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      i {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 5px;
      }
    }
    &.center {
      .modify .input {
        text-align: center;
        padding: 0 30px;
      }
      .show {
        justify-content: center;
        padding: 0 32.5px;
      }
    }
  }
</style>
